<template>
    <div id="page">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item :label="$t('账号')">
                <el-input :placeholder="$t('账号')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">{{ $t('查询') }}</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">{{ $t('添加账号') }}</el-button>
            </el-form-item>
        </el-form>


        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" :label="$t('ID')" width="80"></el-table-column>
            <el-table-column prop="account" :label="$t('账号')" width="120"> </el-table-column>
            <el-table-column prop="rule" :label="$t('角色')" width="200"> </el-table-column>

            <el-table-column :label="$t('操作')" width="180">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">{{ $t('编辑') }}</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">{{ $t('删除') }}</el-button>
                </template>
            </el-table-column>
        </el-table>



        <el-dialog :title="addFormTitle" :visible.sync="addAccountVisible">
            <el-form :model="addAccountData">
                <el-form-item :label="$t('账号')" label-width="100px">
                    <el-input v-model="addAccountData.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label="$t('密码')" label-width="100px">
                    <el-input v-model="addAccountData.pwd" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item :label="$t('角色')" label-width="100px">
                    <el-radio-group v-model="addAccountData.rule" size="small">
                        <el-radio-button :label="$t('店长')" value="1"></el-radio-button>
                        <el-radio-button :label="$t('库管')" value="2" ></el-radio-button>
                        <el-radio-button :label="$t('收银员')" value="3"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addAccountVisible = false">{{ $t('取消') }}</el-button>
                <el-button type="primary" @click="save">{{ $t('保存') }}</el-button>
            </div>
        </el-dialog>




    </div>
</template>

<script>
export default {


    data() {
        return {
            doingRow:{},
            addFormTitle:"",
            addAccountData:{
                account:"",
                pwd:"",
                rule:""
            },
            addAccountVisible:false,
            tableData: []
        }
    },
    mounted() {
        let res = [{
            id:"1",
            account:"A001",
            rule:"1"
        },{
            id:"2",
            account:"A002",
            rule:"2"
        },{
            id:"3",
            account:"A003",
            rule:"3"
        }]
        for (let i = 0; i < res.length; i++) {
            res[i].rule = this.$t('角色列表')[res[i].rule]
        }
        console.log(res);
        this.tableData = res;
    },
    methods: {
        search(){

        },
        save(){
            this.addAccountVisible = false
        },
        add(){
            this.addFormTitle = this.$t('添加账号');
            this.addAccountVisible = true;
        },
        edit(row) {
            this.addFormTitle = this.$t('编辑账号');
            this.addAccountVisible = true;

            console.log(row);
        },
        del(row) {
            this.$confirm(this.$t('删除确认'), this.$t('提示'), {}).then(() => {
                this.tableData.splice(this.tableData.indexOf(row), 1);
            }).catch(() => {

            });
        },
        inWarehouse(row) {
            this.doingRow = row;
            this.WarehouseTitle = row.name+" "+this.$t('入库');
            this.addWarehouseVisible = true;
        },
        outWarehouse(row) {
            this.doingRow = row;
            this.WarehouseTitle = row.name+" "+this.$t('出库');
            this.addWarehouseVisible = true;
        }
    },
}

</script>

<style scoped lang="scss">
#page{
    min-height: 100%;padding: 10px;
    background: #f3f3f3;
}
.small{
    width: 50px;
}
</style>
